<script setup>
	import config from './config'
	import { cloneDeep } from 'lodash-es'
	import datasetApi from '@/views/plugin/dashboard/api/datasetApi'
	import dayjs from 'dayjs'
	import { designStore } from '@/views/plugin/dashboard/store'
	const useDesignStore = designStore()
	const props = defineProps({
		config: {
			type: Object,
			default: () => config
		}
	})
	const container = computed(() => ({
		padding: `${props.config.style.paddingT}px ${props.config.style.paddingR}px ${props.config.style.paddingB}px ${props.config.style.paddingL}px`,
		background: props.config.style.bgColor,
		borderColor: props.config.style.borderColor,
		borderWidth: props.config.style.borderWidth + 'px',
		borderStyle: props.config.style.borderStyle,
		borderTopLeftRadius: props.config.style.bgRTL + 'px',
		borderTopRightRadius: props.config.style.bgRTR + 'px',
		borderBottomLeftRadius: props.config.style.bgRBL + 'px',
		borderBottomRightRadius: props.config.style.bgRBR + 'px',
		boxShadow: `${props.config.style.shadowX}px ${props.config.style.shadowY}px ${props.config.style.shadowDegree}px ${props.config.style.shadowColor}`
	}))
	const titleIconStyle = computed(() => ({
		fontSize: props.config.style.titleIconSize + 'px',
		color: props.config.style.titleIconColor
	}))
	const titleEndStyle = computed(() => ({
		fontSize: props.config.style.titleEndSize + 'px',
		color: props.config.style.titleEndColor,
		fontWeight: props.config.style.titleEndWeight ? 800 : 500,
		fontStyle: props.config.style.titleEndStyle ? 'italic' : '',
		textDecoration: props.config.style.titleEndLine ? 'underline' : ''
	}))
	const titleEndIconStyle = computed(() => ({
		fontSize: props.config.style.titleEndIconSize + 'px',
		color: props.config.style.titleEndIconColor
	}))
	const titleStyle = computed(() => ({
		justifyContent: props.config.style.align,
		fontSize: props.config.style.titleSize + 'px',
		color: props.config.style.titleColor,
		fontWeight: props.config.style.titleWeight ? 800 : 500,
		fontStyle: props.config.style.titleStyle ? 'italic' : '',
		textDecoration: props.config.style.titleLine ? 'underline' : ''
	}))
	const value = ref()
	// 接数据源
	const formState = ref(cloneDeep(props.config.data))

	const getListData = (val) => {
		const date = val.format('YYYY-MM-DD')
		const list = formState.value.listValue.value || []
		const its = list.map((item) => {
			return {
				date: item[props.config.data.date.field] ? dayjs(item[props.config.data.date.field]).format('YYYY-MM-DD') : '',
				content: item[props.config.data.content.field] || '',
				type: getdots(item)
			}
		})
		return its.filter((item) => date && item.date === date)
	}
	const getdots = (item) => {
		return props.config.style.dots.find((badge) => item[props.config.data.type.field] === badge.value)?.type || 'false'
	}
	const oldDataSetJson = ref({})
	// 获取数据源数据函数
	const fetchChartData = async (isFlag = false) => {
		const { dataSetType, dataSetJson } = props.config.dataSetConfig
		const isNew = isFlag || JSON.stringify(oldDataSetJson.value) !== JSON.stringify(dataSetJson)
		formState.value = props.config.data
		// 如果是静态数据
		if (dataSetType === 0) return

		// 仅在 dataSetId 实际改变时才重新获取数据
		if (dataSetType === 1 && dataSetJson && Object.keys(dataSetJson).length > 0 && isNew) {
			// 更新值
			oldDataSetJson.value = dataSetJson
			// 模拟接口返回下拉数据
			await datasetApi.preview(dataSetJson).then((res) => {
				formState.value.listValue.value = res || []
			})
		}
	}

	const onReload = (isFlag = false) => {
		fetchChartData(isFlag)
	}
	defineExpose({ onReload })
</script>

<template>
	<div class="container" :style="container">
		<div
			class="flex justify-between mb-[15px]"
			:style="{ justifyContent: props.config.style.align }"
			v-if="props.config.style.titleShow"
		>
			<div class="flex items-center">
				<span
					:class="['mr-[8px]', 'iconfont', props.config.style.titleIcon]"
					:style="titleIconStyle"
					v-if="props.config.style.titleIconShow"
				></span>
				<div :style="titleStyle">{{ props.config.style.title }}</div>
			</div>
			<div v-if="props.config.style.align === 'space-between'" class="flex items-center">
				<div :style="titleEndStyle" v-if="props.config.style.titleEndShow">{{ props.config.style.titleEnd }}</div>
				<span
					:class="['ml-[8px]', 'iconfont', props.config.style.titleEndIcon]"
					:style="titleEndIconStyle"
					v-if="props.config.style.titleEndIconShow"
				></span>
			</div>
		</div>
		<a-calendar v-model:value="value" style="height: 100%; width: 100%">
			<template #dateCellRender="{ current }" v-if="props.config.style.isContent">
				<div v-for="(item, index) in getListData(current)" :key="index" class="events">
					<template v-if="props.config.style.isDots">
						<a-badge :status="item.type" :text="item.content" style="width: auto" />
					</template>
					<span v-else>{{ item.content }}</span>
				</div>
			</template>
		</a-calendar>
	</div>
</template>

<style scoped lang="less">
	.container {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	:deep(.ant-picker-calendar-date-content) {
		height: auto !important;
	}
	:deep(.ant-picker-calendar) {
		display: flex;
		flex-direction: column;
	}
	:deep(.ant-picker-panel) {
		flex: 1;
	}
	:deep(.ant-picker-date-panel) {
		height: 100%;
	}
	:deep(.ant-picker-body) {
		height: 100%;
	}
	:deep(.ant-picker-content) {
		height: 100% !important;
	}
	:deep(tr) {
		display: flex;
		width: 100%;
		height: 16.5%;
	}
	:deep(tr > th) {
		width: 100% !important;
	}
	:deep(td) {
		width: 100%;
		height: 100%;
	}
	:deep(.ant-picker-calendar-date) {
		height: 100% !important;
		display: flex !important;
		flex-direction: column !important;
	}
	:deep(.ant-picker-calendar-date-content) {
		height: 100% !important;
		overflow-y: scroll;
	}
	:deep(.ant-badge-status) {
		overflow: hidden;
		white-space: nowrap;
		width: 100%;
		text-overflow: ellipsis;
		font-size: 12px;
	}
	:deep(.ant-picker-month-panel) {
		height: 100%;
	}
	:deep(.events) {
		overflow: hidden;
		white-space: nowrap;
		width: 100%;
		text-overflow: ellipsis;
		font-size: 12px;
	}
</style>
